<!--
 * @Description: 
 * @Date: 2022-06-10 08:57:45
 * @LastEditTime: 2022-07-28 09:47:21
 * @FilePath: \jsnode\css\grid.html
-->
<!DOCTYPE html>
<html>

<head>
    <style>
        .comcss {
            /* background-color: green; */
            width: 100px;
            height: 100px;
            margin-top: 10px;
            color: #ffffff;
            text-align: center;
            /* border: 10px solid red; */
        }

        .card {
            border: 1px solid red;
        }

        .wrapper {
            display: grid;
            width: 100px;
            height: 100px;
            margin-top: 10px;
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr;
        }

        .wrapper1 {
            display: grid;
            width: 100px;
            margin-top: 10px;
            height: 100px;
            grid-template-rows: repeat(2fr, 1fr);
            grid-template-columns: 1fr 1fr;
        }
        .wrapper2 {
            display: grid;
            width: 100px;
            margin-top: 10px;
            height: 100px;
            grid-template-rows: repeat(2fr, 1fr);
            grid-template-columns: 1/3;
        }
        .card3{
            border: 1px solid red;
            grid-column: 1/3;
        }
        .card4{
            border: 1px solid red;
            grid-row: 1/3;
            grid-column: 2/3;
        }

    </style>
</head>

<body>
    <!-- 单位fr是分数的缩写，有几列就定义几个。这么写看上去有点傻，可以用repeat，改起来更方便。 -->
    <div class="wrapper">
        <div class="card">1</div>
        <div class="card">2</div>
        <div class="card">3</div>
        <div class="card">4</div>
        <div class="card">5</div>
    </div>

    <div class="wrapper1">
        <div class="card">1</div>
        <div class="card">2</div>
        <div class="card">3</div>
        <div class="card">4</div>
        <div class="card">5</div>
    </div>

    <div class="wrapper">
        <div class="card">1</div>
        <div class="card3">2</div>
        <div class="card">3</div>
        <div class="card4">4</div>
        <div class="card">5</div>
    </div>

</body>

</html>